<template>
  <div>

    <el-tree
      accordion
      ref="treeRefe"
      :data="deptList"
      @node-click="setDeptId"
      :highlight-current="true"
      :default-expanded-keys="defaultShowNodes"
      :current-node-key="currentNodekey"
      @node-expand="handleNodeExpand"
      @node-collapse="handleNodeCollapse"
      node-key="id"
      class="filter-tree"
    >
      <span
        class="custom-tree-node"
        slot-scope="{ node, data }"
        style="margin-left: -8px;"
      >
        <span
          class="mdleft"
        >
          <span style="margin-right: 5px">
            <Icon
              type="md-people"
              color="#1577FE"
              size="22"
              v-if="data.id == 0"
            />
            <Icon
              type="ios-person"
              color="#1577FE"
              size="22"
              v-else
            />
            <!-- <img src="../../../assets/img/wode.png" alt="" style="width:16px;height:16px"> -->
            <!-- <Icon type="md-folder" color="#BABCC4" size="16"/> -->
          </span>
          {{data.roleName}}
        </span>
        <span
          class="edit"
          style="display: none"
        >
          <el-button
            class="bianji"
            type="text"
            icon="el-icon-edit"
            @click.stop="edit(node, data)"
          ></el-button>
        </span>
      </span>
    </el-tree>
    <!-- 编辑角色 -->
    <el-dialog
      title="编辑角色名"
      :visible.sync="uptRoleNameDialog"
      :close-on-click-modal='false'
    >
      <el-form
        :model="uptRoleNameForm"
        :rules="rules"
        ref='uptRoleNameForm'
      >
      <!-- :label-width="formLabelWidth" -->
        <el-form-item
          label="区域名称"
          
          prop="name"
        >
          <el-input
            v-model="uptRoleNameForm.name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="uptRoleNameDialog = false">取 消</el-button>
        <el-button
          type="primary"
          @click="uptRole('uptRoleNameForm')"
        >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { amendUserRole, getmenuList } from '@/api/data.js'
export default {
  props: ['deptList'],
  data () {
    return {
      uptRoleNameForm: {
        name: ''
      },
      uptRoleNameDialog: false,
      deptIdList: [], // 当前所选部门id
      defaultShowNodes: [], //默认展开的节点id
      currentNodekey: "",//当前选中的节点
      deptListData: [],
      rules: {
        name: [
          { required: true, message: '角色名不能为空', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' },
          {
            validator: function (rule, value, callback) {
              // 校验中文的正则：/^[\u4e00-\u9fa5]{0,}$/
              if (/^[\u4e00-\u9fa5]{0,}$/.test(value) == false) {
                callback(new Error('只能输入中文'))
              } else {
                // 校验通过
                callback();
              }
            }, trigger: 'blur'
          }
        ],
      },
      id: ''
    }
  },
  created () {
    this.departmentList();

  },
  methods: {
    edit (node, data) {
      this.uptRoleNameForm.name = data.label;
      this.uptRoleNameDialog = true;
    },
    uptRole (uptDeptNameForm) {
      this.$refs[uptDeptNameForm].validate(async valid => {
        if (valid) {
          const res = await amendUserRole({
            id: this.id,
            roleName: this.uptRoleNameForm.name
          })
          console.log('编辑角色', res);
        }
      })
    },
    async setDeptId (val) {
      console.log(val);
      console.log('点击了用户');
      const res = await getmenuList({
        rolesId: val.id
      })
      console.log('菜单', res);
      this.id = val.id
      this.$emit("search", val, res);
    },
    handleNodeExpand (data) {
      // 保存当前展开的节点
      let flag = false;
      this.defaultShowNodes.some((item) => {
        if (item === data.id) {
          // 判断当前节点是否存在， 存在不做处理
          flag = true;
          return true;
        }
      });
      if (!flag) {
        // 不存在则存到数组里
        this.defaultShowNodes.push(data.id);
      }
    },
    // 树节点关闭
    handleNodeCollapse (data) {
      this.defaultShowNodes.some((item, i) => {
        if (item === data.id) {
          // 删除关闭节点
          this.defaultShowNodes.length = i;
        }
      });
    },
    // 获取部门列表
    departmentList () {
      this.APIS.roleslist().then((res) => {
        // console.log(res.data)
        if (res.code == 20000) {
          this.defaultShowNodes = [0];
          this.currentNodekey = deptList[0].id
          this.$nextTick(() => {
            this.$refs.treeRefe.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来
          });
          var data = res.data
          this.deptListData = data;
          this.$emit("search", res.data[0]);
        } else {
          this.$Message.error(res.message);
        }
      })
    },
  }
}
</script>

<style scoped lang="less">

.el-tree-node__content:hover {
  .textd {
    // margin-right: 30px;
  }
  .edit {
    display: inline-block !important;
    // padding-left: 238px;
  }
}
/deep/.el-tree-node.is-current > .el-tree-node__content {
  background-color: #d0e4ff !important;
  color: #606266 !important;
}
.md-more {
  display: none;
  position: absolute;
  right: 10px;
  margin-top: -28px;

  .member-handle {
    text-align: left;
    display: none;
    position: absolute;
    left: -13px;
    top: 15px;
    background: #ffffff;
    border: 0px solid rgba(216, 216, 216, 0.3803921568627451);
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.16);
    opacity: 1;
    z-index: 999;

    div {
      width: 68px;
      padding-top: 3px;
      padding-bottom: 3px;
      color: #969696;
    }

    span {
      font-size: 14px;
      margin-left: 15px;
    }

    div:hover {
      color: #ffffff;
      background: #1577fe;
    }
  }
}

.md-more:hover {
  .member-handle {
    display: block !important;
  }
}

// /deep/ .el-tree{
//   background: none;
//   color: #eee;
// }
/deep/ .el-tree-node:focus > .el-tree-node__content {
  // background-color: #1577FE !important;
  // color: #fff !important;

  .md-more {
    display: block;
  }
}

::v-deep .el-tree-node__content:hover {
  background-color: #eee;

  .md-more {
    display: block;
  }
}

/deep/
  .el-tree--highlight-current
  .is-current.el-tree-node
  > .el-tree-node__content {
  background-color: #1577fe !important;
  color: #fff !important;
}
</style>
